<template>
    <div id="list">
        <!--查询，添加-->
        <div class="list_header">
            <div class="header_add">
                <el-button type="primary" @click="handleAddAlert">添加类别</el-button>
            </div>
            <div class="header_search">
                <el-form :inline="true" class="demo-form-inline" :model="searchForm" ref="searchForm">
                    <el-form-item>
                        <el-input prefix-icon="el-icon-search" placeholder="楼栋号" clearable
                            v-model.trim="searchForm.searchBlockNumber"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input prefix-icon="el-icon-search" placeholder="房间号" clearable
                            v-model.trim="searchForm.searchRoomNumber"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-select :no-data-text="showClientOption ? '加载中' : '无数据'" :filterable="true" clearable
                            v-model="searchForm.searchCustomerId" placeholder="选择客户姓名">
                            <el-option v-for="(item, index) in tableData2" :key="index" :label="item.customerName"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchData">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <!--展示-->
        <el-table v-loading="loading" stripe :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="100"></el-table-column>
            <el-table-column prop="blockNumber" label="楼栋号" width=""></el-table-column>
            <el-table-column prop="roomNumber" label="房间号" width=""></el-table-column>
            <el-table-column prop="customerName" label="客户名称" width=""></el-table-column>
            <el-table-column prop="bedTotalCount" label="床位总数" width=""></el-table-column>
            <el-table-column prop="bedFreeCount" label="空余床位数" width=""></el-table-column>
            <el-table-column label="操作" width="300">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEditAlert(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelAlert(scope.row)">删除</el-button>
                    <el-button size="mini" type="primary" @click="handleShowAlert(scope.row)">租客信息</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <div class="pagination">
            <div class="block">
                <el-pagination @current-change="handleCurrentChange" :current-page="pageCurrent" :page-size="10"
                    layout="total, prev, pager, next, jumper" :total="totalRecord"></el-pagination>
            </div>
        </div>

        <!--编辑-->
        <el-dialog title="修改床位数" :visible.sync="editDialogVisible" :close-on-click-modal="false">
            <el-form label-width="100px" class="demo-ruleForm" :model="editForm" ref="editForm">
                <el-form-item label="床位总数">
                    <el-input type="text" auto-complete="off" clearable
                        v-model.trim="editForm.editBedTotalCount"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="editData" :disabled="isDisable2">提交</el-button>
                    <el-button @click="closeEditAlert">关闭</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--添加-->
        <el-dialog title="添加房间" :visible.sync="addDialogVisible" :close-on-click-modal="false">
            <el-form label-width="100px" :model="addForm" ref="addForm" class="demo-ruleForm">
                <el-form-item label="楼栋号" prop="addBlockId">
                    <el-select placeholder="请选择楼栋号" :filterable="true" :no-data-text="showOption ? '加载中' : '无数据'"
                        clearable v-model="addForm.addBlockId">
                        <el-option v-for="(item, index) in tableData3" :key="index" :label="item.blockNumber"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="房间号" prop="addRoomNumber">
                    <el-input type="text" auto-complete="off" clearable v-model.trim="addForm.addRoomNumber"
                        maxlength="10"></el-input>
                </el-form-item>
                <el-form-item label="床位数量" prop="addBedTotalCount">
                    <el-input type="text" auto-complete="off" clearable v-model.trim="addForm.addBedTotalCount"
                        maxlength="10"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addData" :disabled="isDisable">提交</el-button>
                    <el-button @click="closeAddAlert">关闭</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!--显示租户信息-->
        <el-dialog title="租客信息" :visible.sync="showDialogVisible">
            <el-table :data="gridData">
                <el-table-column property="name" label="姓名" width="150"></el-table-column>
                <el-table-column property="phoneNumber" label="手机号" width="200"></el-table-column>
                <el-table-column property="sex" label="性别" :formatter="formatSex"></el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>

export default {
    data() {
        return {
            addForm: {
                addRoomNumber: null,
                addBlockId: null,
                addBedTotalCount: null
            },
            searchForm: {
                searchCustomerId: null,
                searchRoomNumber: null,
                searchBlockNumber: null
            },
            editForm: {
                editBedTotalCount: null,
            },
            msg: null,
            isDisable: false,
            isDisable2: false,
            showOption: true,
            editDialogVisible: false,
            showClientOption: true,
            addDialogVisible: false,
            delDialogVisible: false,
            showDialogVisible: false,
            loading: false,
            tableData: [{
                blockNumber: '2016-05-02',
                roomNumber: '王小虎',
                customerName: '上海市普陀区金沙江路 1518 弄',
                bedTotalCount: '家',
                bedFreeCount: 'ddd  '
            },],
            tableData2: [],
            tableData3: [],
            gridData: [],
            totalRecord: 12,
            pageCurrent: 1,
            delId: 0,
            editId: null,
        }
    },
    props: {
        auth: {
            type: Object
        }
    },
    created: function () {

    },
    methods: {
        formatSex(row, column, cellValue) {
            if (cellValue == "1") {
                return "男";
            } else if (cellValue == "2") {
                return "女";
            } else {
                return " ";
            }
        },
        closeAlert() {
            this.showDialogVisible = false;
        },
        closeModal() {
            this.delDialogVisible = false;
        },
        closeAddAlert() {
            this.addDialogVisible = false;
            this.$refs["addForm"].resetFields();
        },
        closeEditAlert() {
            this.editDialogVisible = false;
        },
        handleEditAlert(row) {
            this.editDialogVisible = true;
            this.editId = row.id;
            this.editForm.editBedTotalCount = row.bedTotalCount;
        },
        handleDelAlert(row) {
            this.delDialogVisible = true;
            this.msg = "确认删除吗？";
            this.delId = row.id;
        },
        handleAddAlert() {
            this.addDialogVisible = true;
        },
        handleShowAlert(row) {
            let vm = this;
            this.showDialogVisible = true;
        },
        /**各种数据的提交**/
        editData() {
            this.isDisable2 = true;
            let vm = this;
            for (let key in this.editForm) {
                if (this.editForm[key] == "") {
                    this.editForm[key] = null;
                }
            }
            if (this.editForm.editBedTotalCount == null) {
                this.$options.methods.open(vm, "请填写床位总数", "error");
                this.isDisable2 = false;
                return false;
            }
            if (this.editForm.editBedTotalCount < 0) {
                this.$options.methods.open(vm, "输入了错误的数字", "error");
                this.isDisable2 = false;
                return false;
            }
            if (isNaN(this.editForm.editBedTotalCount)) {
                this.$options.methods.open(vm, "床位数必须是数字", "error");
                this.isDisable2 = false;
                return false;
            }
        },
        addData() {
            this.isDisable = true;
            let vm = this;
            for (let key in this.addForm) {
                if (this.addForm[key] == "") {
                    this.addForm[key] = null;
                }
            }
            if (this.addForm.addRoomNumber == null || this.addForm.addBedTotalCount == null || this.addForm.addBlockId == null) {
                this.$options.methods.open(vm, "所有的内容必须填写", "error");
                this.isDisable = false;
                return false;
            }
            if (this.addForm.addBedTotalCount < 0) {
                this.$options.methods.open(vm, "输入了错误的数字", "error");
                this.isDisable = false;
                return false;
            }
            if (isNaN(this.addForm.addBedTotalCount)) {
                this.$options.methods.open(vm, "床位数必须为数字", "error");
                this.isDisable = false;
                return false;
            }
            var setData = {
                roomNumber: this.addForm.addRoomNumber,
                bedTotalCount: this.addForm.addBedTotalCount,
                blockId: this.addForm.addBlockId,
            }
           
        },
        delData() {
            this.delDialogVisible = false;
            let vm = this;
            
        },
        handleCurrentChange(val) {
            this.pageCurrent = val;
            for (let key in this.searchForm) {
                if (this.searchForm[key] == "") {
                    this.searchForm[key] = null;
                }
            }
            var setData = {
                pageCurrent: this.pageCurrent,
                roomNumber: this.searchForm.searchRoomNumber,
                blockNumber: this.searchForm.searchBlockNumber,
                customerId: this.searchForm.searchCustomerId
            }
            this.getTableData(setData);
        },
        searchData() {
            this.pageCurrent = 1;
            for (let key in this.searchForm) {
                if (this.searchForm[key] == "") {
                    this.searchForm[key] = null;
                }
            }
            var setData = {
                roomNumber: this.searchForm.searchRoomNumber,
                blockNumber: this.searchForm.searchBlockNumber,
                customerId: this.searchForm.searchCustomerId,
                pageCurrent: this.pageCurrent
            }
            this.getTableData(setData);
        }
    }
}
</script>

<style scoped>
/*头部*/
.list_header {
    margin: 0 10px;
    margin-top: 18px;
    display: flex;
    border-bottom: 1px solid #e5e5e5;
}

.header_add {
    width: 120px;
    margin-right: 10px;
    min-width: 100px;
}

.header_search {
    flex: 1;
    min-width: 400px;
}

.header_refresh {
    float: right;
    line-height: 42px;
    min-width: 60px;
}

.el-icon-refresh {
    font-size: 20px;
    color: #409eff;
}


/**分页*/

.pagination {
    margin: 10px;
    text-align: right;
    min-width: 400px;
}

form {
    display: block;
    width: 100%;
}


/**加载*/

.el-loading-spinner i {
    color: #409EFF;
    font-size: 50px;
}


/**添加的弹框**/

.el-dialog {
    min-width: 480px;
    position: relative;
    margin: 0 auto 50px;
    background: #fff;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 38%;
}

.el-table__empty-text {
    width: 50%;
    line-height: 60px;
    color: #909399;
}
</style>